<template>
    <el-menu mode="horizontal"
             style="height: 50px;margin-top: 10px;"
             @select="handleSelect"
             @open="handleOpen"
             @close="handleClose">
        <template v-for="item in menuList">
            <el-submenu v-if="item.children" :index="item.name" :route="item" :key="item.path" @click="newMap">
                <!--<template slot="title" :index="item.name">-->
                <!--&lt;!&ndash;<i :class="item.icon"></i>&ndash;&gt;-->
                <!--<span class="sidebar-menu-text" slot="title">{{ itemTitle(item.meta)}}</span>-->
                <!--&lt;!&ndash;<span class="sidebar-menu-text" slot="title">{{ item.meta.title }}</span>&ndash;&gt;-->
                <!--</template>-->
                <el-menu-item-group>
                    <el-menu-item v-for="groupItem in item.children" :index="groupItem.name"
                                  style="height: 0.54rem;"
                                  :key="groupItem.path"
                                  :route="groupItem">
                        <!--<i :class="groupItem.icon" :key="groupItem.path" style="width:24px"></i>-->
                        <!--<span class="sidebar-menu-text" slot="title">{{ groupItem.meta.title }}</span>-->
                        <span class="sidebar-menu-text" slot="title">{{ itemTitle2(groupItem.meta) }}</span>
                    </el-menu-item>
                </el-menu-item-group>
            </el-submenu>
            <el-menu-item v-if="!item.children" :index="item.name" :route="item" :key="item.path">
                <!--<i :class="item.icon"></i>-->
                <!--<span class="sidebar-menu-text" slot="title">{{ item.meta.title }}</span>-->
                <span class="sidebar-menu-text" slot="title">{{itemTitle3(item.meta)}}</span>
            </el-menu-item>
        </template>
    </el-menu>
</template>

<script>
    export default {
        name: "menuBar",
        computed: {
            // itemTitle: function () {
            //     return function (a) {
            //         if (this.$i18n.locale == 'zh' || this.$i18n.locale == null)
            //             return this.getTitle(a);
            //         if (this.$i18n.locale == 'en')
            //             return this.getTitle2(a);
            //     }
            // },
            itemTitle2: function () {
                return function (a) {
                    if (this.$i18n.locale == 'zh')
                        return this.getTitle(a);
                    if (this.$i18n.locale == 'en')
                        return this.getTitle2(a);
                }
            },
            itemTitle3: function () {
                return function (a) {
                    if (this.$i18n.locale == 'zh' )
                        return this.getTitle(a);
                    if (this.$i18n.locale == 'en')
                        return this.getTitle2(a);
                }
            },
            menuList() {
                return this.$store.state.layout.menuList.slice();
            },
        },
        data() {
            return {
                language: 'zh',
                isCollapse: true
            }
        },
        watch: {
            '$route'(to, from) {
                this.currentPageName = to.name
            },
            currentPageName() {
                if (this.$store.state.layout.ready) {
                    this.setCurrentPath()
                } else {
                    setTimeout(() => {
                        this.setCurrentPath()
                    }, 100)
                }
            }
        },
        methods: {
            getTitle(a) {
                return a.title;
            },
            getTitle2(a) {
                return a.title2;
            },
            init() {
                this.currentPageName = this.$router.name;
            },
            handleOpen(key, keyPath) {
                console.log("e")
            },//打开下拉选项事件的响应函数

            handleClose(key, keyPath) {

            },//关闭下拉选项事件的响应函数
            handleSelect(menuName) {
                this.currentPageName = menuName;
                this.$router.push({
                    name: menuName
                });
            },
            newMap(e) {
                console.log(e)
            },

            change(item) {
            },
            setCurrentPath() {
                this.$store.dispatch('setCurrentPath', this.$route.name).then(() => {
                    this.openedMenuList = this.$store.state.layout.openedMenuNameList.slice();
                    this.$nextTick(() => {
                    })
                })
            }
        },
        mounted() {
            this.init();
        },
        created() {
            let that = this;
            this.$Bus.$on("changeLan", res => {
                // that.language = res;
                that.$forceUpdate();
            });
        }
    }
</script>

<style>
    .el-menu-item * {
        color: #2d2f33;
    }

    .el-submenu__title * {
        color: #2d2f33;
    }

    .el-menu--horizontal > .el-menu-item {
        float: left;
        height: 50px;
        /* line-height: 40px; */
        margin: 0;
        border-bottom: 2px solid transparent;
        color: #909399;
    }

    .el-menu--horizontal > .el-submenu .el-submenu__title {
        height: 0.5rem;
        line-height: 0.6rem;
        border-bottom: 0.02rem solid transparent;
        color: #909399;
    }
</style>